<template>
    <div class="todayO">
      <div class="box">
        <div class="title">今日营业额(元) </div>
        <div class="titleTime">截止至五分钟前 </div>
        <div class="price">{{totalPrice}}</div>
      </div>

      <div class="box1">
        <div class="title">今日有效订单(个)</div>
        <div class="titleTime">截止至五分钟前</div>
        <div class="price">{{num}}</div>
      </div>


      <!--最新订单展示-->

      <div class="wrap">
        <!--订单搜索-->
        <div>
        <span>
            <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="message"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        </div>

        <div class="todayOrder" v-for="(item,index) of orders" :key="index">
          <div style="margin-bottom: 5px; border-bottom: 1px solid #9c9ca5">
            <span>订单号 {{item.id}}</span>
            <span style="margin-left: 550px; color: #9c9ca5">{{item.createtime}}</span>
          </div>
          <div v-for="(dishitem, index) of dishs" :key="index">
            <div class="dishs" v-if="dishitem.id==item.id">
              <span style="font-weight: bold;">{{dishitem.dname}}</span>
              <span style="margin-left: 600px;font-weight: bold; color: blue">× {{dishitem.dish_num}}</span>
              <span style="margin-left: 40px; color: red;font-weight: bold">$ {{dishitem.dprice}}</span>
            </div>
          </div>

          <div style="text-align: right; width: 760px;">
            总计: <span style="color: red;font-weight: bold">$ {{item.totalprice}}</span>
          </div>
        </div>
      </div>



    </div>


</template>

<script>
  import {listTodayOrder, listTodayOrders, listDishOrder, listNewOrder, listLikeOrder} from "@/api/catering/todayOrder";

  export default {
    name: 'index',
    data() {
      return {
        todayOrderList:[],
        totalPrice:'',
        num:'',
        oid:'',
        /*orders:{
          id:'',
          time:'',
          totalprice:''
        },*/
        orders:[],
        dishs:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          oid: null,
          sname: null,
          sage: null,
          ssex: null
        },
        message:''

      }
    },
    created() {
      this.getTodayOrderList();
    },
    methods:{
      getTodayOrderList(){
        //获取今日订单营业额和订单数量
        listTodayOrder(this.queryParams).then(response =>{
          console.log(response.data);
          this.totalPrice = response.data.totalPrice;
          this.num = response.data.num;
        })
        //获取今日订单详细信息
        listTodayOrders(this.queryParams).then(response =>{
          console.log(response)
          console.log(response.data);
          this.todayOrderList = response.data;
        })
        //获取今日订单最新一单
        listNewOrder(this.queryParams).then(response =>{
          console.log(response.data);
          this.orders.push(response.data);
          console.log(this.orders)
        })
        //获取所有订单中的菜品
        listDishOrder().then(response =>{
          console.log(response);
          this.dishs = response.data;
          console.log(this.dishs)
        })

      },
      //搜索门店方法
      onSubmit(){
        this.orders=[]
        const message = this.message;
        listLikeOrder(message).then(response =>{
          console.log(response);
          this.orders=response.data
          console.log(this.orders)
        })
      }


    }
  }
</script>

<style scoped>
  .todayO{
    position: relative;
  }
  .box{
    position: absolute;
    top: -280px;
    left: 100px;
    /*background-color: #00afff;*/
    padding: 50px 15px;
    width: 400px;
    box-shadow: 1px 1px 1px 1px #9c9ca5;
  }
  .box1{
    position: absolute;
    top: -280px;
    left:550px;
    /*background-color: #00afff;*/
    padding: 50px 15px;
    width: 400px;
    box-shadow: 1px 1px 1px 1px #9c9ca5;
  }
  .title{
    font-size: 25px;
    color: black;
    margin-bottom: 40px;
  }
  .titleTime{
    font-size: 12px;
    color: #9c9ca5;
  }
  .price{
    position: absolute;
    top: 35px;
    left: 235px;
    font-size: 85px;
    color: red;
    font-weight: bold;
  }
  .wrap{
    position: relative;
    margin-top: 300px;
    margin-left: 100px;
    width: 853px;
  }
  .borderb{
    background-color: #3A71A8;
  }
  .todayOrder{
    /*background-color: #3A71A8;*/
    font-size: 16px;
    padding: 15px 45px;
    border: 1px solid #9c9ca5;
  }

  .dishs{
    padding: 15px 0;
    border-bottom: 1px solid #9c9ca5;
  }



</style>
